<template>
  <van-cell-group>
    <van-field
      required
      v-model="password1"
      type="password"
      label="新密码"
      placeholder="请输入新密码"
      :label-width="100"
    />
    <van-field
      required
      v-model="password2"
      type="password"
      label="确认新密码"
      placeholder="请输入新密码"
      :label-width="100"
    />
    <van-field
      required
      v-model="phoneNumber"
      center
      clearable
      label="手机号"
      placeholder="请输入手机号"
      ><template #button>
        <van-button
          size="small"
          type="primary"
          @click="sendSMS"
          :disabled="disabledButton"
          :color="color"
          >{{ buttonText }}</van-button
        >
      </template></van-field
    >
    <van-field
      v-model="smsCode"
      center
      clearable
      required
      label="短信验证码"
      placeholder="请输入短信验证码"
    />
  </van-cell-group>
  <van-button
    type="primary"
    block
    round
    color="linear-gradient(to right, #a9a9a9, #333333)"
    @click="ChangePassword"
    >修改密码</van-button
  >
  <van-space direction="vertical" size="350px" fill>
    <p></p>
    <p style="text-align: center; color: darkgray; font-size: 12px">
      © 2024 红薯科技. All rights reserved.
    </p>
  </van-space>
  <p style="text-align: center; color: darkgray; font-size: 12px">
    晋ICP备2024044585号
  </p>
</template>

<script>
import { ref } from "vue";
import MyAxios from "@/plugins/MyAxios";
import { showLoadingToast, showNotify } from "vant";
import store from "@/store";
import router from "@/router";

export default {
  setup() {
    const password1 = ref("");
    const password2 = ref("");
    const phoneNumber = ref("");
    const disabledButton = ref(false);
    const color = ref("#00050b");
    const buttonText = ref("发送验证码");
    const smsCode = ref("");
    const sendSMS = () => {
      if (phoneNumber.value === "") {
        showNotify({ type: "warning", message: "请输入手机号" });
        return;
      }
      if (disabledButton.value) return;
      disabledButton.value = true;
      const toast1 = showLoadingToast({
        message: "正在发送...",
        forbidClick: true,
      });
      console.log(phoneNumber.value);
      setTimeout(() => {
        MyAxios.get("/user/sendCode", {
          params: {
            phone: phoneNumber.value,
          },
        }).then((res) => {
          console.log(res);
          const { code } = res;
          toast1.close();
          const { message } = res.data;
          if (code === 0) {
            showNotify({ type: "success", message: "验证码已发送" });
            buttonText.value = "验证码已发送5分钟内有效";
            color.value = "#999";
            disabledButton.value = true;
            setTimeout(() => {
              buttonText.value = "发送验证码";
              color.value = "#00050b";
            }, 5 * 60 * 1000);
          } else {
            showNotify({ type: "warning", message: message });
          }
        });
      }, 500);
      disabledButton.value = false;
    };

    let isSubmitting = false; // 添加一个状态标记，防止重复提交
    const ChangePassword = () => {
      if (isSubmitting) return; // 如果正在提交，则直接返回
      isSubmitting = true; // 设置状态为正在提交
      const toast1 = showLoadingToast({
        message: "正在修改...",
        forbidClick: true,
      });
      setTimeout(() => {
        console.log(
          smsCode.value,
          password1.value,
          phoneNumber.value,
          password2.value
        );
        MyAxios.post("/user/forgetPassword", {
          checkCode: smsCode.value,
          checkPassword: password2.value,
          phoneNumber: phoneNumber.value,
          userPassword: password1.value,
        }).then((res) => {
          const { code } = res;
          toast1.close();
          if (code === 0) {
            showNotify({ type: "success", message: "密码修改成功" });
            setTimeout(() => {
              router.push("/login");
            }, 500);
          } else {
            showNotify({ type: "warning", message: res.data.message });
          }
        });
      }, 500);
      isSubmitting = false; // 提交完成后，重置状态标记
    };
    return {
      password1,
      password2,
      phoneNumber,
      sendSMS,
      ChangePassword,
      disabledButton,
      color,
      buttonText,
      smsCode,
    };
  },
};
</script>

<style scoped></style>
